<!--  -->
<template>
  <div class="box">
    <div class="lef">
      <div class="logo">
        <img src="@/img/logo.png">
      </div>
      <div class="ls">
        <el-row :gutter="0">
          <el-col :span="3" v-for="(item, index) in data" @click="dit(item, index)" :class="{ xz: current == index }"
            :key="item">
            <router-link :to="`/${item}`">
              <div class="grid-content ep-bg-purple">
                <img src="@/img/2.png" v-if="index == 2">
                <span v-else>{{ item }}</span>
              </div>
            </router-link>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="mid"></div>
    <div class="rig">
      <div class="inp">
        <div class="search">
          <el-icon class="fdj">
            <Search />
          </el-icon>
          <span>搜索</span>
        </div>
        <input type="text">
      </div>
      <div class="lie">
        <span>无障碍交流</span>
        <span>关怀版</span>
        <el-button type="primary" round style="margin-top: -6px; width: 70px;">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang='js'>
import { ref, reactive } from 'vue'
import { navdata } from "@/stores/nav.js";
const navd = navdata();
const data = ['首页', '要闻', '亚运会', '热问', '山东', '财经', '科技', '更多'];
const current = ref(0);
function dit(item, index) {
  current.value = index;
  navd.data = item;
}
</script>

<style  scoped>
.grid-content{
  overflow: hidden;
}
.grid-content img{
  width: 55px;
  margin-top: 10px;
}
.lie span {
  cursor: pointer;
  margin-right: 34px;
  font-size: 18px;
}

.lie span:hover {
  color: rgb(0, 85, 255);
}

.lie {
  width: 300px;
  height: 40px;
  position: absolute;
  line-height: 40px;

  top: 12px;
  right: 0;
  overflow: hidden;
}

.search span {
  position: absolute;
  font-size: 16px;
  margin-left: 26px;
  top: -22px;
}

.fdj {
  position: absolute;
  top: 2px;
  margin-left: 3px;
}

.search {
  width: 80px;
  height: 80%;
  cursor: pointer;
  position: absolute;
  top: 3.5px;
  right: 0;
  border-left: 1px solid grey;
  z-index: 999;
}

.duoc {
  width: 20px;
}

.inp {
  margin-top: 18px;
  width: 400px;
  height: 30px;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}

.inp input {
  position: absolute;
  width: 93%;
  height: 100%;
  margin-top: 0;
  right: 0;
  background-color: rgb(253, 232, 232);
  border-radius: 30px;
  outline: none;
  transition: all .3s;
  border: none;
  text-indent: 1em;
}

.inp input:focus {
  width: 100%;
}

.rig {
  width: 720px;
  line-height: 66px;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
}

.lef {
  width: 720px;
}

.logo {
  width: 120px;
  height: 30px;
  margin-top: 15px;
  float: left;
}

.logo img {
  width: 120px;
  height: 30px;
}

.ls {
  float: left;
  width: 600px;
  height: 100%;
  overflow: hidden;
}

.xz {
  color: rgb(0, 85, 255);
  border-bottom: 2px solid rgb(0, 85, 255);
}

.el-row {
  margin-top: 10px;
}

.el-col {
  line-height: 38px;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  border-radius: 0px !important;
  color: black;
}

.el-col:hover a {
  color: rgb(0, 85, 255);
  font-weight: 600;

}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.mid {
  flex: 1;
}





.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
